import { useContext } from "react";
import React from "react";
import { NodeViewContext } from "../NodeViewContext";
import { NODE_ELEM_MARGIN } from "../NodeViewConfig";

export enum PortDirection {
    IN, OUT
}

export default class Port {
    portType: number;
    portName: string;
    portDir: PortDirection;

    constructor(portType: number, portName: string, portDir: PortDirection) {
        this.portName = portName;
        this.portType = portType;
        this.portDir = portDir;
    }
}

export function PortView({data}: {data: Port}) {
    const ctx = useContext(NodeViewContext);

    let cx = data.portDir == PortDirection.IN ? ctx.relX - NODE_ELEM_MARGIN : 
                                                ctx.relX + ctx.width + NODE_ELEM_MARGIN;

    let textX = data.portDir == PortDirection.IN ? cx + 8 : cx - 8;

    return (
        <>
            <circle cx={cx} cy={ctx.relY} r={5}></circle>
            <text x={textX} y={ctx.relY + 5} fontSize={10}
                  textAnchor={data.portDir == PortDirection.IN ? "start" : "end"}>Hello</text>
        </>
    )
}
